<template>
  <!-- 走进校园(底部)-->
  <div class="container-fluid">
    <div class="row carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner2-4.png"
            class="d-block w-100"
            alt="..."
          >
        </div>
        <div class="Suspension">
          <p class="cla" >课程服务</p>
          <ul class="kuang">
            <li class="alone" @click="open">
              <p class="child">在线学习</p>
            </li>
            <li class="alone1">
              <router-link class="childo" to="/Campus">
                <p class="child">走进校园</p>
              </router-link>
            </li>
            <li class="alone2">
              <router-link class="childo" to="/loginCourse">
                <p class="child child2">科教基地</p>
              </router-link>
            </li>
            <li class="alone3" @click="open">
              <p class="child">假期研学</p>
            </li>
            <li class="alone4" @click="open">
              <p class="child">赛事活动</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bigtwo row">
      <div class="bigin">
        <div class="header1">
          <div class="header2"></div>
          <div class="header3"></div>
          <div class="lt" :class="dis1(0)" @click="prev1" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis1(1)" @click="next1" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic1" :style="{ left: `${myleft}px` }">
              <li class="graphic" v-for="(item) in items" :key="item.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="item.img" width="277" height="222">
                    <p class="size1">{{item.text}}</p>
                    <p class="size2">{{item.text1}}</p>
                    <router-link :to="{name:item.path}">
                      <img class="tua" :src="item.url">
                    </router-link>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- <ul>
        <li v-for="v in list" :key="v.id">-->
        <div class="heda">
          <div class="heda1"></div>
          <div class="heda2"></div>
          <div class="lt" :class="dis(0)" @click="prev" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis(1)" @click="next" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${left}px` }">
              <li class="graphic" v-for="v in list" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <router-link :to="{name:v.path}">
                      <img class="tua" :src="v.url">
                    </router-link>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- </li>
        </ul>-->
        <!-- <div class="heda">
          <div class="heda1"></div>
          <div class="heda3"></div>
          <div class="lt" :class="dis2(0)" @click="prev2" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis2(1)" @click="next2" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${myleft1}px` }">
              <li class="graphic" v-for="v in list1" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <a href>
                      <img class="tua" :src="v.url">
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="heda">
          <div class="heda1"></div>
          <div class="heda4"></div>
          <div class="lt" :class="dis3(0)" @click="prev3" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis3(1)" @click="next3" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${myleft2}px` }">
              <li class="graphic" v-for="v in list2" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <a href>
                      <img class="tua" :src="v.url">
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="heda">
          <div class="heda1"></div>
          <div class="heda5"></div>
          <div class="lt" :class="dis4(0)" @click="prev4" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis4(1)" @click="next4" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${myleft3}px` }">
              <li class="graphic" v-for="v in list3" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <a href>
                      <img class="tua" :src="v.url">
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="heda">
          <div class="heda1"></div>
          <div class="heda6"></div>
          <div class="lt" :class="dis5(0)" @click="prev5" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis5(1)" @click="next5" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${myleft4}px` }">
              <li class="graphic" v-for="v in list4" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <a href>
                      <img class="tua" :src="v.url">
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div> -->
        <div class="heda">
          <div class="heda1"></div>
          <div class="heda7"></div>
          <div class="lt" :class="dis6(0)" @click="prev6" href="javascript:void(0)">&lt;</div>
          <div class="gt" :class="dis6(1)" @click="next6" href="javascript:void(0)">&gt;</div>
          <div class="blog-bg">
            <ul class="graphic4" :style="{ left: `${myleft5}px` }">
              <li class="graphic" v-for="v in list5" :key="v.id">
                <div class="graphic2">
                  <div class="graphic3">
                    <img :src="v.img" width="277" height="222">
                    <p class="size1">{{v.text}}</p>
                    <p class="size2">{{v.text1}}</p>
                    <router-link :to="{name:v.path}">
                      <img class="tua" :src="v.url">
                    </router-link>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "Campus",
  data() {
    const items = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan5.png",
        text: "厦门海沧新江中心小学",
        text1:
          "2019年1月20日，哈工科教教师团队应邀参加了厦门市海沧新江中心小学“科技探索.畅想未来”科技节。同学们在哈工科教老师的带领下，动手搭建了属于自己的运动小车，并通过软件编程，实现了小车的规定线路运动。数百名学生参与了本次“科技探索.畅想未来”科技节活动，孩子们享受着智能机器人编程带来的乐趣，还在搭建机器人和编程的过程中理解了速度、重心、三角成面等数学和物理概念，收获满满。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"xiamen"
        
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan6.png",
        text: "北京第94中学附属小学",
        text1:
          "从2018年10月31日开始，哈工科教教师团队接受北京市第94中学附属小学的邀请，与第94中学附属小学共同开展了“龙泽园社区科普进校园系列活动——科技伴我成长”，在活动期间，哈工科教的老师给同学们讲解了“手语灵巧手”和“呼吸灯”的工作原理，并带领同学们完成了硬件的搭建，兴致盎然的同学们课后还会提出各种小问题，这样的学习氛围带动了越来越多的小伙伴加入我们。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"beijing"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan7.png",
        text: "福建社区活动",
        text1:
          "2018年11月，哈工科教在厦门大型社区活动中开设了儿童体验活动，活动现场展示了许多搭建完成的作品。在哈工老师的指导下小朋友进行了动手操作，当“自动跟随车”、“眨眼的星星”、“地震报警器”等一件件作品展现出来的时候，小朋友们脸上洋溢开了满足的笑容，活动结束后许多小朋友表示这样的活动很有趣希望下次还能继续参加，家长也说这样的活动很有意义，希望孩子能动手尝试。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"fujian"
      }
    ];
    const list = [
      {
        img:
          "http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaooyuan8.png",
        text: "贵州贵阳",
        text1:
          "2018年7月，哈工科教教育团队在贵州贵阳举办了暑期科技体验营活动，本次活动以体验式教学训练同学们的多维度能力，利用编程为孩子打通逻辑思维能力，从而拓宽孩子的视野。活动过程中哈工科教教师讲解了硬件机器人的搭建方法，同时也教会了同学们基础软件的使用。同学们在所学知识的支持下凭借丰富的想象力完成了许多让人眼前一亮的作品。贵州电视台对本次活动进行了全程跟踪采访。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"guizhou"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan9.png",
        text: "四川资阳",
        text1:
          "2018年11月，四川资阳的小朋友们走进了哈工科教的营地活动，在活动的过程中哈工科教的老师带领小朋友们进行了实际动手操作，每位小朋友都学会了机器人的搭建，在活动中积极的表述着自己的想法，与其他小朋友也进行了热烈的讨论。整个搭建过程增加了小朋友们的沟通，提升了想象力，这样有趣的课堂，让小朋友们充满了满足感并对编程产生了浓厚的兴趣。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"sichuan"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan10.png",
        text: "广东佛山三水西南中学",
        text1:
          "2018年11月5日，哈工科教教师团队来到了广东佛山三水西南中学，在这里开展了机器人编程教学活动，参加活动的30多名同学在活动过程中有许多出色的表现。他们目不转睛的观看了教学视频，在哈工科教老师的讲解下更加充分的理解了课程的知识点。在动手环节每位同学都争相的进行硬件拼插，不仅如此，许多小朋友表示对代码编写也很有兴趣。最后，在课程结束时大家都完成了属于自己的小作品。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"guangdong"
      }
    ];
    const list1 = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "亦庄实验小学",
        text1:
          "给一个20人的机器人社团上智能机器人与编程课程，维持半学期2018.11.5号-2019.1.9号其中18年11月19号去参加了大兴区中小学生机器人智能创意竞赛。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "第94中学附属小学",
        text1:
          "2018年10月31号起通过龙泽园社区科普进校园系列活动——科技伴我成长进去第94中学附属小学，活动前后参与人数300-400人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "厦门海沧",
        text1:
          "2019年1月20号参加厦门市海沧新江中心小学“科技探索.畅想未来”科技节，活动参与人数达300人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      }
    ];
    const list2 = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "亦庄实验小学",
        text1:
          "给一个20人的机器人社团上智能机器人与编程课程，维持半学期2018.11.5号-2019.1.9号其中18年11月19号去参加了大兴区中小学生机器人智能创意竞赛。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "第94中学附属小学",
        text1:
          "2018年10月31号起通过龙泽园社区科普进校园系列活动——科技伴我成长进去第94中学附属小学，活动前后参与人数300-400人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "厦门海沧新江中心小学",
        text1:
          "2019年1月20号参加厦门市海沧新江中心小学“科技探索.畅想未来”科技节，活动参与人数达300人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      }
    ];
    const list3 = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "亦庄实验小学",
        text1:
          "给一个20人的机器人社团上智能机器人与编程课程，维持半学期2018.11.5号-2019.1.9号其中18年11月19号去参加了大兴区中小学生机器人智能创意竞赛。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "第94中学附属小学",
        text1:
          "2018年10月31号起通过龙泽园社区科普进校园系列活动——科技伴我成长进去第94中学附属小学，活动前后参与人数300-400人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "厦门海沧新江中心小学",
        text1:
          "2019年1月20号参加厦门市海沧新江中心小学“科技探索.畅想未来”科技节，活动参与人数达300人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      }
    ];
    const list4 = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "亦庄实验小学",
        text1:
          "给一个20人的机器人社团上智能机器人与编程课程，维持半学期2018.11.5号-2019.1.9号其中18年11月19号去参加了大兴区中小学生机器人智能创意竞赛。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "第94中学附属小学",
        text1:
          "2018年10月31号起通过龙泽园社区科普进校园系列活动——科技伴我成长进去第94中学附属小学，活动前后参与人数300-400人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner2-1.jpg",
        text: "厦门海沧新江中心小学",
        text1:
          "2019年1月20号参加厦门市海沧新江中心小学“科技探索.畅想未来”科技节，活动参与人数达300人。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png"
      }
    ];
    const list5 = [
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan1.png",
        text: "北京亦庄实验小学",
        text1:
          "2018年11月，哈工科教教师团队前往亦庄实验小学为校内的机器人社团带来了为期三个月的专业辅导，在辅导过程中同学们学习了许多硬件知识，了解到了大量电子元器件，掌握了“机械手”、“扫地机器人”的搭建方法，并且通过编程实现了“机械手”的猜拳功能和“扫地机器人”的避障运动功能。同学们通过动手实操，在辅导过程中收获良多，扩充知识储备量的同时也增强了沟通协作能力。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"yizhuang"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan2.png",
        text: "山东章丘四中",
        text1:
          "2018年上半年，山东的章丘四中在信息技术课上使用了哈工科教自主研发的软硬件素材。同学们在这样的课堂上变得更加专注认真。这样软件学习与硬件拼接相结合的教学形式相比于以往的理论课程让同学们体会到了更大的乐趣和成就感。每次课程的结束学生都能完成自己的一个小作品，给学生带来了很大的学习动力。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"shandong"
      },
      {
        img:
          "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/zoujinxiaoyuan4.png",
        text: "山西杏花岭东华门小学",
        text1:
          "2018年12月25日，哈工科教走进了杏花岭东华门小学，并且将软硬件融入到了学校的正式课程中。哈工科教带去的课程有着丰富的内容和无限的乐趣，深深的吸引着每一位同学。在全新的课程当中，同学们认识到了以往没有接触过的软硬件知识。在每次课堂上同学们都保持着无限的热情，积极的动手操作硬件，认真的讨论课上知识。每次的课程都有了属于自己的小作品。",
        url: "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/0.png",
        path:"shanxi"
      }
    ];
    return {
      items,
      list,
      list1,
      list2,
      list3,
      list4,
      list5,
      index: 0,
      index1: 0,
      index2: 0,
      index3: 0,
      index4: 0,
      index5: 0,
      index6: 0,
      left: 0,
      myleft: 0,
      myleft1: 0,
      myleft2: 0,
      myleft3: 0,
      myleft4: 0,
      myleft5: 0
    };
  },
  watch: {
    index(v) {
      if (v >= this.list.length) {
        this.index = 3;
      }
      this.left = this.index * -373;
    },
    index1(item) {
      if (item >= this.items.length) {
        this.index1 = 3;
      }
      this.myleft = this.index1 * -373;
    },
    index2(item) {
      if (item >= this.list1.length) {
        this.index2 = 3;
      }
      this.myleft1 = this.index2 * -373;
    },
    index3(item) {
      if (item >= this.list2.length) {
        this.index3 = 3;
      }
      this.myleft2 = this.index3 * -373;
    },
    index4(item) {
      if (item >= this.list3.length) {
        this.index4 = 3;
      }
      this.myleft3 = this.index4 * -373;
    },
    index5(item) {
      if (item >= this.list4.length) {
        this.index5 = 3;
      }
      this.myleft4 = this.index5 * -373;
    },
    index6(item) {
      if (item >= this.list5.length) {
        this.index6 = 3;
      }
      this.myleft5 = this.index6 * -373;
    }
  },
  methods: {
     open() {
        this.$message('暂未开放，敬请期待');
      },
    prev() {
      if (this.index >= 1) {
        this.index--;
      }
    },
    next() {
      if (this.index <= this.list.length-4) {
        this.index++;
      }
    },
    prev1() {
      if (this.index1 >= 1) {
        this.index1--;
      }
    },
    next1() {
      if (this.index1 <= this.items.length-4) {
        this.index1++;
      }
    },
    prev2() {
      if (this.index2 >= 1) {
        this.index2--;
      }
    },
    next2() {
      if (this.index2 <= this.list1.length-4) {
        this.index2++;
      }
    },
    prev3() {
      if (this.index3 >= 1) {
        this.index3--;
      }
    },
    next3() {
      if (this.index3 <= this.list2.length-4) {
        this.index3++;
      }
    },
    prev4() {
      if (this.index4 >= 1) {
        this.index4--;
      }
    },
    next4() {
      if (this.index4 <= this.list3.length-4) {
        this.index4++;
      }
    },
    prev5() {
      if (this.index5 >= 1) {
        this.index5--;
      }
    },
    next5() {
      if (this.index5 <= this.list4.length-4) {
        this.index5++;
      }
    },
    prev6() {
      if (this.index6 >= 1) {
        this.index6--;
      }
    },
    next6() {
      if (this.index6 <= this.list5.length-4) {
        this.index6++;
      }
    },
    dis(v) {
      if (this.index === 3) {
        if (v) {
          return "btn btn-light";
        }
      } else if (this.index === 0) {
        if (!v) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis1(item) {
      if (this.index1 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index1 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis2(item) {
      if (this.index2 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index2 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis3(item) {
      if (this.index3 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index3 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis4(item) {
      if (this.index4 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index4 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis5(item) {
      if (this.index5 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index5 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    },
    dis6(item) {
      if (this.index6 === 3) {
        if (item) {
          return "btn btn-light";
        }
      } else if (this.index6 === 0) {
        if (!item) {
          return "btn btn-light";
        }
      }
      return "btn btn-primary";
    }
  },
   mounted(){
    $(".alone2").click(function() {
      scrollTo(0, 425);
      $(".child2")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
  }
};
</script>

<style scoped>
.container-fluid {
  min-width: 1200px;
}
.bigtwo {
  height: 2382px;
  background: #eeeeee;
}
.bigin {
  width: 1200px;
  height: 2382px;
  margin: 0 auto;
}
.header1 {
  height: 759px;
}
.header2 {
  height: 100px;
}
.header3 {
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti1.png");
}
.blog-bg {
  margin-top: 80px;
  height: 497px;
  width: 1093px;
  margin: 80px auto;
  overflow: hidden;
}
.graphic1 {
  width: 10000px;
  position: relative;
  transition: all 1s ease-in-out 0s;
}
.graphic {
  position: relative;
  float: left;
  margin-right: 41px;
  width: 332px;
  height: 444px;
  background-color: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(40, 40, 40, 0.16);
}
.graphic2 {
  width: 277px;
  height: 222px;
  margin: 23px 28px 29px 27px;
}
.graphic3 {
  width: 277px;
  height: 222px;
}
@font-face {
  font-family: heiti;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/AdobeHeitiStd-Regular.otf")
      format("svg");
}
.size1 {
  width: 226px;
  height: 20px;
  margin-top: 33px;
  font-family: heiti;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  line-height: 32px;
  letter-spacing: 0px;
  color: #444444;
}
.size2 {
  width: 278px;
  height: 62px;
  margin-top: 23px;
  font-family: "微软雅黑";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 22px;
  letter-spacing: 0px;
  color: #999999;
  text-indent: 30px;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 0;
}
.tua {
  margin-top: 24px;
}
.heda {
  width: 1200px;
  height: 778px;
}
.heda1 {
  width: 1200px;
  height: 120px;
}
.heda2 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti2.png");
}
.heda3 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti3.png");
}
.heda4 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti4.png");
}
.heda5 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti5.png");
}
.heda6 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti6.png");
}
.heda7 {
  width: 1200px;
  height: 81px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/biaoti7.png");
}

.graphic4 {
  position: relative;
  width: 10000px;
  transition: all 1s ease-in-out 0s;
}
.lt {
  z-index: 999;
  position: absolute;
  width: 37px;
  height: 40px;
  margin-top: 274px;
}
.gt {
  z-index: 999;
  position: absolute;
  width: 37px;
  height: 40px;
  margin-top: 274px;
  float: right;
  margin-left: 1158px;
}
.btn-primary {
  border-color:#1673F4; 
  background: #1673F4;
}
.btn-light {
  border-color:#8FBFFD; 
  background: #8FBFFD;
}
.Suspension {
  position: fixed;
  z-index: 1;
  width: 136px;
  top: 37%;
  left: 0px;
  margin: auto;
  margin-left: 10px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/xuanfu3.0.png");
}
.kuang {
  margin-top: 59px;
}
.alone {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.alone:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone1 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
}
.alone1:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone2:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone3 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone3:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone4 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone4:hover {
  background: #c2e0ff;
  color: #317dd2;
  border-radius: 0 0 4px 8px;
}
.child {
  font-family: "黑体";
  font-size: 16px;
  margin-bottom: 0px;
  text-shadow: 1px 1px 4px #2e70bf;
}
.child:hover{
  text-shadow: 0px 0px 0px #2e70bf;
}
.childo {
  color: #ffffff;
}
.childo:hover {
  color: #317dd2;
}
.cla {
  font-family: "gaoduanhei";
  font-size: 20px;
  margin-bottom: -33px;
  text-align: center;
  margin-top: 5px;
  color: #ffffff;
  line-height: 26px;
  text-shadow: 1px 1px 4px #d98a02;
}
@font-face {
  font-family: gaoduanhei;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("svg");
}
.stage1 {
  color: orange;
}
</style>
